<template>
<div id="tabs">
  <!-- {{ tabs }} <br> {{ timestamp }} -->
  <div class="tabs">
    <Tabs type="card" :value="$route.path" :key="timestamp" @on-click="handleTabClick" @on-tab-remove="handleTabRemove">
      <TabPane :name="item.path" :label="item.name" v-for="(item, key) in menu" :key="key" v-if="item.path === '/'" />
      <TabPane :name="tag.path" :label="tag.name" closable v-for="(tag, key) in tabs" :key="key" />
    </Tabs>
  </div>
  <div class="dropdown">
    <Dropdown trigger="click" placement="bottom-end" @on-click="handleDropdownClick">
      <Button :disabled="dropdown.disabled" type="primary"> {{ dropdown.name }}
        <Icon type="arrow-down-b"></Icon>
      </Button>
      <DropdownMenu slot="list">
        <DropdownItem :name="item.name" :disabled='item.disabled' v-for="(item, key) in dropdownItems" :key="key">{{ item.label }}</DropdownItem>
      </DropdownMenu>
    </Dropdown>
  </div>
</div>
</template>
<script>
import {
  mapGetters
} from 'vuex'

export default {
  name: 'tabs',
  computed: {
    ...mapGetters({
      menu: 'getMenu',
      tabs: 'getTabs',
      timestamp: 'getTimestamp'
    })
  },
  data() {
    return {
      dropdown: {
        name: 'Tabs',
        disabled: false
      },
      // 下拉菜单元素数组
      dropdownItems: [{
        label: 'Close Other Tabs',
        name: 'closeOtherTabs',
        disabled: false
      }, {
        label: 'Close All Tabs',
        name: 'closeAllTabs',
        disabled: false
      }]
    }
  },
  mounted() {
    // 下拉菜单状态管理
    this.handleDropdownState(this.tabs.length)
  },
  methods: {
    // 新建标签页
    handleTabNew(name) {
      this.$store.commit('NEW_TABS', name)
    },
    // 切换标签页
    handleTabClick(name) {
      this.handleMenuActive(name) // 激活菜单
    },
    // 关闭标签页
    handleTabRemove(name) {
      let path = this.$route.path // 当前路径
      let tabs = this.tabs // 标签页对象
      if (path === name) {
        tabs.map((tab, index) => {
          // 判断是否删除当前激活标签页
          if (tab.path === name) {
            // 获取当前激活标签页的相邻标签页
            let nextTab = tabs[index + 1] || tabs[index - 1]
            path = nextTab ? nextTab.path : '/'
          }
        })
      }
      this.handleMenuActive(path) // 激活菜单
      this.$store.commit('CLOSE_TABS', ['closeTab', name]) // 关闭当前标签页
    },
    // 管理标签页
    handleDropdownClick(name) {
      const path = this.$route.path // 当前路径
      if (name === 'closeAllTabs') {
        this.handleMenuActive('/') // 激活菜单
      }
      // 判断关闭所有或其它标签页
      name = name === 'closeAllTabs' ? name : [name, path]
      this.$store.commit('CLOSE_TABS', name) // 关闭标签页
    },
    // 下拉菜单状态管理
    handleDropdownState(name) {
      if (name === 0) {
        this.dropdown.disabled = true
      } else {
        this.dropdown.disabled = false
        if (name === 1) {
          this.dropdownItems[0].disabled = true
          return
        }
        this.dropdownItems[0].disabled = false
      }
    },
    // 激活菜单
    handleMenuActive(name) {
      this.$router.push(name) // 路由跳转
      this.$store.commit('SET_TIMESTAMP') // 设置组件 key 值(时间戳)
      this.$store.commit('MENU_SELECT', `/${name.split('/')[1]}`) // 获取子菜单
      this.$store.commit('CHILD_MENU_SELECT', name) // 激活菜单
    }
  },
  watch: {
    // 侦听路由变化
    $route() {
      this.handleTabNew(this.$route.path)
    },
    // 侦听标签变化
    tabs() {
      this.handleDropdownState(this.tabs.length)
    }
  }
}
</script>
<style lang="scss">
#tabs {
    position: relative;
    margin-left: 240px;
    padding: 8px;
    background-color: #fff;
    .tabs {
        margin-right: 80px;
        .ivu-tabs-bar {
            margin-bottom: 0;
        }
    }
    .dropdown {
        position: absolute;
        top: 8px;
        right: 8px;
    }
}
</style>
